<template>
    <div class="sjplatformSelectForm">
        <el-form :inline="true">
            <el-form-item label="流程名称">
                <el-input v-model="approveTable.queryCondition.approveName" placeholder="请输入名称..." />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openEditForm('add', null)">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="sjplatformtable">
        <el-table :data="approveTable.tableData" v-loading="loading" empty-text="暂无数据" stripe border
            style="width: 100%">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ $index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="approveName" label="流程名称" class-name="left-align">
                <template #default="{ row }">
                    <el-tooltip class="item" effect="light" :content="row.approveName" placement="top">
                        <span>{{ row.approveName }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="flowTypeName" label="流程类型" width="140" />
            <el-table-column prop="submitTime" label="创建时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.submitTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="140">
                <template #default="{ row }">
                    <div :class="getStatusStyle(row.status)"> {{
                        getStatusEnumChineseByValue(row.status, ProcessEnum.CreateProject) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
                <template #default="{ row }">
                    <el-tooltip content="查看详情" placement="bottom" effect="light">
                        <i class="detail-icon" @click="showDetail(row)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="!isProjectFlow(row.flowTypeName)" content="修改" placement="bottom" effect="light">
                        <i class="edit-icon" @click="openEditForm('edit', row)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="!isProjectFlow(row.flowTypeName)" content="删除" placement="bottom" effect="light">
                        <i class="del-icon" @click="handleDelete(row)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="isProjectFlow(row.flowTypeName) && row.status == StatusEnum.SubmitApproval"
                        content="撤销流程" placement="bottom" effect="light">
                        <i class="revocation-icon" @click="withdrawApproval(row)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="approveTable.total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="newApproveDetailVisible" title="流程审批" width="70%" draggable :destroy-on-close="true">
        <ApproveDeatil :showOperation="false" />
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import commonUtil from "../../utils/common";
import { useApproveTable } from "../../hooks/ApproveManager/useApproveTable";
import { StatusEnum, ProcessEnum, getStatusEnumChineseByValue, getStatusStyle } from "../../hooks/Common/useStatusEnum";
import { useLoginUserStore } from "../../store";
import { useProjectTable } from "../../hooks/ProjectManager/Start/useProjectTable";
import { useFlowTypeTable } from "../../hooks/FlowManager/useFlowTypeTable";
import ApproveDeatil from "./ApproveDeatil.vue";

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let addOrUpdate = ref(false);
let formTitle = ref('新增流程');
let loginUserStore = useLoginUserStore();
let newApproveDetailVisible = ref(false);

//判断是否是项目流程
let { flowTypeTable, getProjectFlowType } = useFlowTypeTable(1, 10);
getProjectFlowType();
function isProjectFlow(typename) {
    var result = flowTypeTable.projectFlowTypes.find(t => t.typeName == typename);
    if (result) {
        return true
    }
    return false;
}

let { approveTable, approveStore, getAllApproveMain, createData, updateData, deleteDataByFid } =
    useApproveTable(currentPage, pageSize);
getAllApproveMain(loginUserStore.currentUser.id);

//项目信息
let { projectStore, updateProjectSpecificContent } =
    useProjectTable(currentPage, pageSize);

//查看详情
function showDetail(value) {
    approveStore.approveMainModel = value;
    newApproveDetailVisible.value = !newApproveDetailVisible.value;
}
//确定
function confirm() {
    newApproveDetailVisible.value = !newApproveDetailVisible.value;
}

//打开编辑窗口
function openEditForm(value, data) {
    addOrUpdate.value = value;
    if (value == "add") {
        formTitle.value = "新增流程";
    }
    if (value == "edit") {
        formTitle.value = "修改流程";
    }
}

//删除流程
function handleDelete(data) {

}

//撤回项目审批
async function withdrawApproval(data) {
    commonUtil.Methods.confirm("确定撤回流程吗？", async () => {
        projectStore.projectModel.id = data.fid;
        projectStore.projectModel.status = StatusEnum.Creating;
        projectStore.projectModel.updateProperties.push('Status');
        if (await deleteDataByFid(data.fid) && await updateProjectSpecificContent()) {
            commonUtil.Methods.ShowMessage("success", "撤回审批成功！");
            searchData();
        }
    })
}
//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    searchData(); // 根据当前页获取数据
}

//查询按钮
function searchData() {
    loading.value = true;
    currentPage.value = 1;
    getAllApproveMain(loginUserStore.currentUser.id);
    loading.value = false;
}
</script>